<template>
  <div class="card">
    <div>
      <a-select v-model="formData.search.bank_id" class="select" :allowClear="true" placeholder="银行名称">
        <a-select-option v-for="item in bankList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select
        class="select"
        v-model="formData.search.type"
        @change="onChange"
        :allowClear="true"
        placeholder="请选择通道类型"
      >
        <a-select-option v-for="item in channelType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-select v-model="formData.search.channel_id" class="select" :allowClear="true" placeholder="请选择通道">
        <a-select-option v-for="item in planType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-input class="select" placeholder="通道编码" v-model="formData.search.channel_code"></a-input>
      <a-button type="primary" @click="getList">查询</a-button>
      <a-button @click="reset">重置</a-button>
      <a-button type="primary">重置为推荐排序</a-button>
    </div>
    <a-table
      bordered
      :rowKey="(record, index) => index"
      :pagination="false"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="list" slot-scope="text, record">
        <div class="channel" v-for="item in record.channel_list" :key="item.channel_id">
          <div>
            <span>通道编码：</span><span>{{ item.third_code }}</span>
          </div>
          <div>
            <span>通道名称：</span><span>{{ item.name }}</span>
          </div>
          <div>
            <span>品牌结算：</span><span>{{ item.trade_rate }} / {{ item.trade_fee }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span>
              四方：<span>{{ item.platform }}</span>
            </span>
            <span>关闭</span>
          </div>
        </div>
      </div>
    </a-table>
  </div>
</template>

<script>
import { getPlanAPI } from '@/api/transaction.js'
import { getChannelAPI, getBankOptionAPI, getAddress } from '@/api/channel.js'
export default {
  name: 'ChannelDefaultManage',
  data() {
    return {
      loading: false,
      bankList: [],
      channelType: [],
      planType: [],
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: {
          bank_id: undefined,
          channel_code: '',
          channel_id: undefined,
          type: 1
        }
      },
      columns: [
        {
          title: '银行名称',
          dataIndex: 'name',
          align: 'center',
          width: '200px'
        },
        {
          title: '通道',
          scopedSlots: { customRender: 'list' }
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getType()
    this.getList()
  },
  methods: {
    async onChange() {
      const result = await getPlanAPI({
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: { type: this.formData.search.type }
      })
      this.planType = result.data
    },
    async getType() {
      const { data } = await getPlanAPI({
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: { type: this.formData.search.type }
      })
      const channel = await getChannelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      const result = await getAddress()
      this.bankList = result.data
      this.channelType = channel.data
      this.planType = data
    },
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        search: {
          bank_id: undefined,
          channel_code: '',
          channel_id: undefined,
          type: 1
        }
      }
      this.getList()
    },
    async getList() {
      try {
        this.loading = true
        const result = await getBankOptionAPI(this.formData)
        this.tableData = result.data
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.select {
  vertical-align: middle;
  margin-right: 10px;
  width: 200px;
}
.channel {
  padding: 10px 20px;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: #ebeef5;
}
</style>
